<!DOCTYPE html>
<html lang="zh" xmlns:th="http://www.thymeleaf.org">
<head th:replace="/public/css :: common_css(~{::title},~{::link})">
    <title>Manager - KafkaEagle</title>
    <link th:href="@{/media/css/plugins/select2/select2.min.css}" rel="stylesheet"/>
</head>
<body>
<nav th:replace="/public/navbar :: common_navbar"></nav>
	<div id="wrapper">
		<div id="page-wrapper">
			<div class="row">
				<div class="col-lg-12">
					<h1 class="page-header">
						Manager <small>Topic</small>
					</h1>
				</div>
				<!-- /.col-lg-12 -->
			</div>
			<!-- /.row -->
			<div class="row">
				<div class="col-lg-12">
					<div class="alert alert-info alert-dismissable">
                        <button aria-hidden="true" class="close" data-dismiss="alert" type="button">×</button>
                        <i class="fa fa-info-circle"></i>
                        <strong>
                            Select kafka topic, then edit the topic config, such as clean topic data,
                            modify topic config, describe topic config etc.
                        </strong>
                    </div>
				</div>
			</div>
			<!-- /.row -->
			<div class="row">
				<div class="col-lg-12">
					<div class="panel panel-default">
						<div class="panel-heading">
							<i class="fa fa-cogs fa-fw"></i> Content
							<div class="pull-right"></div>
						</div>
						<!-- /.panel-heading -->
						<div class="panel-body">
                            <div class="form-group">
                                <label>Type (*)</label><br/>
                                <label class="radio-inline">
                                    <input checked="" id="ke_topic_alter" name="ke_topic_alter" type="radio"
                                           value="add_config">
                                    Add Config
                                </label>
                                <label class="radio-inline">
                                    <input id="ke_topic_delete" name="ke_topic_alter" type="radio" value="del_config">
                                    Delete Config
                                </label>
                                <label class="radio-inline">
                                    <input id="ke_topic_describe" name="ke_topic_alter" type="radio"
                                           value="desc_config">
                                    Describe Config
                                </label>
                                <!-- <label class="radio-inline"> <input type="radio"
                                    name="ke_topic_alter" id="ke_topic_clean" value="clean_data">Clean
                                    Data
                                </label> -->
                                <br/>
                                <label class="control-label text-danger">
                                    <i class="fa fa-info-circle"></i>
                                    Select operate type when you getter/setter topic .
                                </label>
                            </div>
                            <div class="form-group">
                                <label>Topic Name (*)</label>
                                <select id="select2val" name="select2val"
                                        style="width: 100%; font-family: 'Microsoft Yahei', 'HelveticaNeue', Helvetica, Arial, sans-serif; font-size: 1px;"
                                        tabindex="-1"></select>
                                <input id="ke_topic_name" name="ke_topic_name" type="hidden"/>
                                <label class="control-label text-danger">
                                    <i class="fa fa-info-circle"></i>
                                    Select the topic you need to alter .
                                </label>
                            </div>
                            <div id="div_topic_keys" class="form-group">
                                <label>Key (*)</label>
                                <select id="select2key" name="select2key"
                                        style="width: 100%; font-family: 'Microsoft Yahei', 'HelveticaNeue', Helvetica, Arial, sans-serif; font-size: 1px;"
                                        tabindex="-1"></select>
                                <input id="ke_topic_key" name="ke_topic_key" type="hidden"/>
                                <label class="control-label text-danger">
                                    <i class="fa fa-info-circle"></i>
                                    Select the topic property key you need to set .
                                </label>
                            </div>
                            <div id="div_topic_value" class="form-group">
                                <label>Value (*)</label>
                                <input class="form-control" id="ke_topic_value" name="ke_topic_value" type="text"/>
                                <label class="control-label text-danger">
                                    <i class="fa fa-info-circle"></i>
                                    Set the topic property value when you submit setter.
                                </label>
                            </div>
                            <div id="div_topic_msg" class="form-group">
                                <label>Message (*)</label>
                                <textarea id="ke_topic_config_content"
                                          name="ke_topic_config_content" class="form-control"
                                          placeholder="" rows="5" readonly maxlength="120"></textarea>
                                <label class="control-label text-danger">
                                    <i class="fa fa-info-circle"></i>
                                    Get result from server when you getter/setter topic .
                                </label>
                            </div>
                            <button type="button" class="btn btn-primary" id="btn_send">Submit
                            </button>
                            <div class="alert alert-danger" id="alert_message_alter" style="display: none">
                                <label>Oops! Please make some changes . (*) is required.</label>
                            </div>
                        </div>
					</div>
					<!-- /.col-lg-4 -->
				</div>
				<!-- /.row -->
			</div>
			<!-- /#page-wrapper -->
		</div>
	</div>
<div th:replace="/public/script :: common_js(~{::script})">
    <script th:src="@{/media/js/main/topic/manager.js}" type="text/javascript"></script>
    <script th:src="@{/media/js/plugins/select2/select2.min.js}" type="text/javascript"></script>
</div>
</body>
</html>